<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>员工列表练习</title>
    </head>
    <body>
        <input type="text" placeholder="请输入员工姓名" id="1">
        <input type="text" placeholder="请输入员工工资" id="2">
        <input type="text" placeholder="请输入员工岗位" id="3">
        <button onclick="tjyg()">添加员工</button>
        <hr>
        <table border="1">
            <caption>员工表</caption>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>岗位</th>
            </tr>
        </table>
        <script>
            //8.准备数组用来保存多个员工对象
            let arr = [];

            function addEmp() {
                //1.获取用户在输入框中输入的数据
                let uName = document.getElementById('i1').value;
                let uSalary = document.getElementById('i2').value;
                let uJob = document.getElementById('i3').value;
                //2.创建1个tr与3个td元素
                let tr = document.createElement('tr');
                let nameTd = document.createElement('td');
                let salaryTd = document.createElement('td');
                let jobTd = document.createElement('td');
                //3.将收集到的数据分别装入对应的td中
                nameTd.innerHTML = uName;
                salaryTd.innerHTML = uSalary;
                jobTd.innerHTML = uJob;
                //4.将准备好的3个td装入tr中
                tr.append(nameTd, salaryTd, jobTd);
                //5.获取表格元素
                let table = document.querySelector('table');
                //6.将上方准备好的tr装入table中
                table.append(tr);
                //7.用完数据后,清空输入框
                document.getElementById('i1').value = '';
                document.getElementById('i2').value = '';
                document.getElementById('i3').value = '';
                //9.将收集到的数据存入数组中,用于后续给后端发请求做新增操作
                arr.push({
                    name: uName,
                    salary: uSalary,
                    job: uJob
                });
                console.log(arr);
            }
        </script>
    </body>
</html>